var prefix = ctx +"module/screenPage/"
let designSize = 1920; // 设计图尺寸
let html = document.documentElement;
let wW = html.clientWidth;// 窗口宽度
let rem = wW * 100 / designSize;
document.documentElement.style.fontSize = rem + 'px';
var chartNum = ['0', '0', '0', '0', '0', '0', '0', '0'];
var chartNum2 = ['0', '0', '0', '0', '0', '0', '0', '0'];

$(window).resize(function ()// 绑定到窗口的这个事件中
{
    let designSize = 1920; // 设计图尺寸
    let html = document.documentElement;
    let wW = html.clientWidth;// 窗口宽度
    let rem = wW * 100 / designSize;
    document.documentElement.style.fontSize = rem + 'px';
});
$(function () {
    load();
    start();
    getRecordToday();
    initEcharts();
    setInterval(function setInt() {
        getRecordToday();
    }, 5000)
});

function initEcharts() {
    getCompanyType();
    getTownRecordType();
    getDayRecordCountChart();
}

function goMain() {
    window.location.href = ctx + 'index?goType=1';
}
function getCompanyType() {
    $.ajax({
        type: "POST",
        url: prefix + "getCompanyTypeChart",
        data: {
        },
        success: function (data) {
            if (data.code == 0) {
                initCompanyType(data.list)
            }
        }
    });

}
function getDayRecordCountChart() {
    $.ajax({
        type: "POST",
        url: prefix + "getDayRecordCountChart",
        data: {},
        success: function (data) {
            if (data.code == 0) {
                initDayRecordChart(data.listRewards, data.listRewardsError, data.listPointsNormal, data.listPointsError,data.days)
            }
        }
    });

}
function getTownRecordType() {
    $.ajax({
        type: "POST",
        url: prefix + "getTownRecordTypeChart",
        data: {
            type: 1
        },
        success: function (data) {
            if (data.code == 0) {
                initTownRecordTypeChart(data)
            }
        }
    });
}
function openwindow() {
    var doc = document.documentElement;
    if ($(document.body).hasClass("full-screen")) {
        $(document.body).removeClass("full-screen");
        document.exitFullscreen ? document.exitFullscreen() : document.mozCancelFullScreen ? document.mozCancelFullScreen() : document.webkitExitFullscreen && document.webkitExitFullscreen();
    } else {
        $(document.body).addClass("full-screen");
        doc.requestFullscreen ? doc.requestFullscreen() : doc.mozRequestFullScreen ? doc.mozRequestFullScreen() : doc.webkitRequestFullscreen ? doc.webkitRequestFullscreen() : doc.msRequestFullscreen && doc.msRequestFullscreen();
    }
    // --end
}

function load() {
}

function start() {
    var strHtml = "";
    for (var i = 0; i < chartNum.length; i++) {
        strHtml += '<li class="number-item">\n' +
            '                <span><i class="item" ref="numberItem">0123456789</i></span>\n' +
            '            </li>';
    }
    $("#TNum").html(strHtml);
    var strHtml2 = "";
    for (var i = 0; i < chartNum2.length; i++) {
        strHtml2 += '<li class="number-item">\n' +
            '                <span><i class="item" ref="numberItem">0123456789</i></span>\n' +
            '            </li>';
    }
    $("#TNum2").html(strHtml2);
}

function getRecordToday() {
    chartNum = toOrderNum("123", 'TNum');
    setNumberTransform('TNum');
    chartNum2 = toOrderNum("1234", 'TNum2');
    setNumberTransform('TNum2');
}

function toOrderNum(num, id) {
    var currentChartNum
    if (id == 'TNum') {
        currentChartNum = chartNum;
    } else if (id == 'TNum2') {
        currentChartNum = chartNum2;
    }
    num = num.toString()     // 数字变成字符串
    if (num.length < chartNum.length) {  // 如未满位数，添加"0"补位
        num = '0' + num
        currentChartNum = toOrderNum(num, chartNum) // 递归添加"0"补位
    } else if (num.length === chartNum.length) {      // 数中加入逗号
        currentChartNum = num.split('') // 将其便变成数据
    }
    return currentChartNum
}

function setNumberTransform(id) {
    var numberItems = $('#' + id + ' .item');
    var currentChartNum
    if (id == 'TNum') {
        currentChartNum = chartNum;
    } else if (id == 'TNum2') {
        currentChartNum = chartNum2;
    }
    const numberArr = currentChartNum.filter(item => !isNaN(item));
    for (var index = 0; index < numberItems.length; index++) {
        const elem = numberItems[index];
        elem.style.transform = 'translate(-50%, -' + numberArr[index] * 10 + '%)'
    }
}

function initTownRecordTypeChart(data){
    var chart = echarts.init(document.getElementById('main3'));
    var option3 = {
        color: ['#df5353','#50fae9' ],
        title: {
            text: '┃ 近一周乡镇汇总',
            textStyle: {
                fontWeight: 'normal',              //标题颜色
                color: '#50fae9'
            },
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            right: '5%',
            // y:'b ottom',
            data: [{name: '隐患举报', textStyle: {color: "#fff"}}, {name: '安全排查', textStyle: {color: "#fff"}}],
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        calculable: true,
        yAxis: [
            {
                type: 'category',
                data: data.townNameList,
                axisLine: {
                    lineStyle: {
                        color: "#50fae9",
                    }
                }
            }
        ],
        xAxis: [
            {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: "#fff",
                    }
                },
                minInterval:1,
                splitLine: {
                    show: false
                }
            }
        ],
        series: [
            {
                name: '隐患举报',
                type: 'bar',
                data: data.rewardList,
            },
            {
                name: '安全排查',
                type: 'bar',
                data: data.pointsList,
            }
        ]
    };
    chart.setOption(option3);
    $(window).resize(chart.resize);
}
function initDayRecordChart(listRewards, listRewardsError, listPointsNormal, listPointsError,days){
    var chart = echarts.init(document.getElementById('main2'));
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        title: {
            text: "┃ 近一周汇总",
            textStyle: {
                fontWeight: 'normal',              //标题颜色
                color: '#50fae9'
            },
        },
        legend: {
            // orient: 'vertical',
            type: 'scroll',
            left: '25%',
            textStyle: {
                fontWeight: "normal",
                color: "#fff",
            },
            pageIconColor: '#14878e', //翻页下一页的三角按钮颜色
            pageIconInactiveColor: '#1bbec0', //翻页（即翻页到头时）,
            data: ['奖励人次', '惩罚人次', '巡查正常', '巡查异常']
        },
        color: ['#53a93f', '#d7636c', '#17a79c', '#eedd78', '#5B8B94', '#948065', '#D7A02D', '#A97196', '#7DA7A9', '#b1b1b1',],
        xAxis: [
            {
                type: 'category',
                data: days,
                axisLine: {
                    lineStyle: {
                        color: "#fff",
                    },
                },
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: "#fff",
                    }
                }
            }
        ],
        series: [
            {
                name: '奖励人次',
                type: 'bar',
                stack: '隐患举报',
                data: listRewards
            },
            {
                name: '惩罚人次',
                type: 'bar',
                stack: '隐患举报',
                data: listRewardsError
            },
            {
                name: '巡查正常',
                type: 'bar',
                stack: '安全排查',
                data: listPointsNormal
            },
            {
                name: '巡查异常',
                type: 'bar',
                stack: '安全排查',
                data: listPointsError
            }
        ]
    };
    chart.setOption(option);
    $(window).resize(chart.resize);
}
function initCompanyType(data){
    // 基于准备好的dom，初始化echarts实例
    var main1Chart = echarts.init(document.getElementById('main1'), 'default');
    var main1Option = {
        title: {
            text: "┃ 企业类型",
            textStyle: {
                fontWeight: 'normal',              //标题颜色
                color: '#50fae9'
            },
        },
        color: ['#3398DB', '#53a93f', '#d7636c', '#17a79c', '#eedd78', '#5B8B94', '#948065', '#D7A02D', '#A97196', '#7DA7A9'],
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series: [
            {
                // color: ['#3398DB','#7e3794','#f4b400','#d73d32','#53a93f','#eedd78'],
                name: '企业类型',
                type: 'pie',
                radius: ['40%', '60%'],
                center: ['50%', '58%'],
                selectedMode: 'single',
                minAngle: 20,  // 设置每块扇形的最小占比
                data: data,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    textStyle: {
                        fontWeight: 300,
                        fontSize: 14,    //文字的字体大小
                        color: '#fff',
                    },
                    normal: {
                        label: {
                            show: true,
                            formatter: '\n{b} : {c} '
                        },
                        labelLine: {show: true}
                    }
                },
                label: {
                    normal: {
                        /*formatter: "{b} : {c}",*/
                        // formatter: '{a|{d}%}\n{b|{b}}',
                        // formatter: '{b} : {c} ({d}%)',
                        textStyle: {
                            fontWeight: 300,
                            fontSize: 12,    //文字的字体大小
                            color: '#fff'
                        },
                        padding: [0, -75],
                        rich: {
                            a: {
                                color: '#fff',
                                fontSize: 12,
                                lineHeight: 20,
                                align: 'center'
                            },
                            hr: {
                                borderColor: '#333',
                                width: '100%',
                                borderWidth: 0.5,
                                height: 0
                            },
                            b: {
                                fontSize: 12,
                                lineHeight: 20,
                                color: '#fff',
                                align: 'center'
                            }
                        },
                    }
                },
                labelLine: {    //指示线状态
                    normal: {
                        length: 15,
                        length2: 70,
                        align: 'left'
                    }
                }
            }
        ],

    };
    // 使用刚指定的配置项和数据显示图表。
    main1Chart.setOption(main1Option);
    $(window).resize(main1Chart.resize);
}